<template>
  <div>
    <el-chart :data="chartData" type="bar" :x-axis="xAxisConfig" :y-axis="yAxisConfig"></el-chart>
  </div>
</template>

<script>

export default {
  name:"home",
  
  data() {
    return {
      chartData: [], // 存储商品出入库数据
      xAxisConfig: {
        dataKey: 'productName' // 商品名称作为x轴的数据
      },
      yAxisConfig: {
        dataKey: 'quantity' // 出入库数量作为y轴的数据
      }
    };
  },
  methods:{
    fetchStockData(){
      this.$axios.post("/api/out_warehouse/rank").then((res) =>{
        console.log(res);
        this.chartData = res.data.data
      }).catch(error => {
        console.log('Failed to fetch stock data:',error);
      })
    }
  },
  // 在组件加载时获取商品出入库数据
  mounted(){
    this.fetchStockData()
  }
}
</script>

<style>

</style>